<script setup lang="ts">
import Pagination from "@/components/study/Pagination.vue";
import BlogPost from "@/components/study/BlogPost.vue";

//这边为啥要import ref ？
import {ref, reactive} from 'vue'

const posts = ref([
  {id: 1, title: 'My journey with Vue'},
  {id: 2, title: 'Blogging with Vue'},
  {id: 3, title: 'Why Vue is so fun'}
])

const pageInfo = reactive({
  current: 2,
  size: 20,
  total: 20,
  pageSizes: [1, 2, 3]
})

const postFontSize = ref(1)
</script>

<template>
  <div class="about">
    <div :style="{ fontSize: postFontSize + 'em' }">

      <!--@enlarge-text="postFontSize += 0.1"是一个监听事件-->
      <BlogPost
        v-for="post in posts"
        :key="post.id"
        :title="post.title"
        @enlarge-text="postFontSize += 0.1"
      ></BlogPost>
    </div>

    <br>

    <div>
      <pagination v-bind="pageInfo"></pagination>
    </div>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
